
var zr; // 全局可用zrender对象
var fileLocation = 'http://ecomfe.github.io/zrender/doc/example/www/js/zrender';
require.config({
	paths: {
        zrender: fileLocation,
        'zrender/tool/color':fileLocation,
        'zrender/shape/Rose': fileLocation,
        'zrender/shape/Trochoid': fileLocation,
        'zrender/shape/Circle': fileLocation,
        'zrender/shape/Sector': fileLocation,
        'zrender/shape/Ring': fileLocation,
        'zrender/shape/Ellipse': fileLocation,
        'zrender/shape/Rectangle': fileLocation,
        'zrender/shape/Text': fileLocation,
        'zrender/shape/Heart': fileLocation,
        'zrender/shape/Droplet': fileLocation,
        'zrender/shape/Line': fileLocation,
        'zrender/shape/Image': fileLocation,
        'zrender/shape/Star': fileLocation,
        'zrender/shape/Isogon': fileLocation,
        'zrender/shape/BezierCurve': fileLocation,
        'zrender/shape/Polyline': fileLocation,
        'zrender/shape/Path': fileLocation,
        'zrender/shape/Polygon': fileLocation
	}
	,
});

require(
    [
        'zrender',
        'zrender/tool/color',
        'zrender/shape/Rose',
        'zrender/shape/Trochoid',
        'zrender/shape/Circle',
        'zrender/shape/Sector',
        'zrender/shape/Ring',
        'zrender/shape/Ellipse',
        'zrender/shape/Rectangle',
        'zrender/shape/Text',
        'zrender/shape/Heart',
        'zrender/shape/Droplet',
        'zrender/shape/Line',
        'zrender/shape/Image',
        'zrender/shape/Star',
        'zrender/shape/Isogon',
        'zrender/shape/BezierCurve',
        'zrender/shape/Polyline',
        'zrender/shape/Path',
        'zrender/shape/Polygon'
    ],
    function(zrender) {
        zr = zrender.init(document.getElementById('main'));
        console.log('zr ok');

        var color = require('zrender/tool/color');
        var colorIdx = 0;
        var width = Math.ceil(zr.getWidth());
        var height = Math.ceil(zr.getHeight());

        var CircleShape = require('zrender/shape/Circle');
        var SectorShape = require('zrender/shape/Sector');
        var RingShape = require('zrender/shape/Ring');
        var EllipseShape = require('zrender/shape/Ellipse');
        var HeartShape = require('zrender/shape/Heart');
        var DropletShape = require('zrender/shape/Droplet');
        var PolygonShape = require('zrender/shape/Polygon');
        var RectangleShape = require('zrender/shape/Rectangle');
        var PolylineShape = require('zrender/shape/Polyline');
        var LineShape = require('zrender/shape/Line');
        var BezierCurveShape = require('zrender/shape/BezierCurve');
        var TextShape = require('zrender/shape/Text');
        var ImageShape = require('zrender/shape/Image');
        var PathShape = require('zrender/shape/Path');
        var TrochoidShape = require('zrender/shape/Trochoid');
        var RoseShape = require('zrender/shape/Rose');
        var StarShape = require('zrender/shape/Star');
        var IsogonShape = require('zrender/shape/Isogon');
     
        // 绘制背景
        var backgroundImg = new ImageShape({
            style: {
                image: 'img/bg1.jpg',
                x: 0,
                y: 0,
                width: width,
                height: height
            },

            // 响应事件并动态修改图形元素
            onmousewheel: function(params){
                var eventTool = require('zrender/tool/event');
                var delta = eventTool.getDelta(params.event);
                var w = params.target.style.width;
                var h = params.target.style.height;
                w += (delta > 0 ? 1 : -1) * 10;
                h += (delta > 0 ? 1 : -1) * 10;
                if (w < 10) {
                    w = 10;
                };
                if (h < 10) {
                    h = 10;
                };
                zr.modShape(params.target.id, {style: {width: w,height:h}})
                zr.refresh();
                eventTool.stop(params.event);
            },
            draggable : true
        });
        zr.addShape(backgroundImg);

        // 绘制头像
        var headImg = new ImageShape({
            style: {
                image: 'img/head1.jpg',
                x: Math.ceil(width/2-60),
                y: 120,
                width: 120,
                height: 150
            },

            // 响应事件并动态修改
            onmousewheel: function(params){
                var eventTool = require('zrender/tool/event');
                var delta = eventTool.getDelta(params.event);
                var w = params.target.style.width;
                var h = params.target.style.height;
                w += (delta > 0 ? 1 : -1) * 10;
                h += (delta > 0 ? 1 : -1) * 10;
                if (w < 10) {
                    w = 10;
                };
                if (h < 10) {
                    h = 10;
                };
                zr.modShape(params.target.id, {style: {width: w,height:h}})
                zr.refresh();
                eventTool.stop(params.event);
            },

            draggable : true
        });
        zr.addShape(headImg);

        // 姓名
        var card_name = new TextShape({
            style : {
                x : Math.ceil(width/2+30),
                y : 310,
                brushType : 'fill',
                color : '#000000',
                text : '张某某',
                textFont : 'normal 16px verdana',
                textAlign : 'center',
                textBaseline : 'top'
            },
            draggable : true
        }); 
        zr.addShape(card_name);

        // 职务
        var card_zhiwu = new TextShape({
            style : {
                x : Math.ceil(width/2+30),
                y : 340,
                brushType : 'fill',
                color : '#000000',
                text : '讲师',
                textFont : 'normal 16px verdana',
                textAlign : 'center',
                textBaseline : 'top'
            },
            draggable : true
        }); 
        zr.addShape(card_zhiwu);

        // 部门
        var card_dept = new TextShape({
            style : {
                x : Math.ceil(width/2+30),
                y : 365,
                brushType : 'fill',
                color : '#000000',
                text : '信息技术系',
                textFont : 'normal 16px verdana',
                textAlign : 'center',
                textBaseline : 'top'
            },
            draggable : true
        }); 
        zr.addShape(card_dept);

        // 编号
        var card_number = new TextShape({
            style : {
                x : Math.ceil(width/2+30),
                y : 390,
                brushType : 'fill',
                color : '#000000',
                text : '10086',
                textFont : 'normal 16px verdana',
                textAlign : 'center',
                textBaseline : 'top'
            },
            draggable : true
        }); 
        zr.addShape(card_number);


        // 渲染
        zr.render();



    } /* //function(zrender) */
);






